import '../article/article.less';

import React, {
  useEffect,
  useState,
} from 'react';

import {
  ArticleModelState,
  IRouteComponentProps,
  Link,
  useDispatch,
  useSelector,
} from 'umi';

import ArticleTag from '@/components/articleTag/articleTag';
import RecommendedReading
  from '@/components/recommendedReading/recommendedReading';
import { IArticleItem } from '@/types';
import _ from '@umijs/deps/compiled/lodash';

const map: { [key: string]: string } = {
  front: 'front',
  be: 'be',
  reading: 'reading',
  linux: 'linux',
  leetcode: 'leetcode',
  news: "news"
}
const category: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {
  const path = match.params.id
  let id = map[path]
  const { articleCategoryList } = useSelector((state: { article: ArticleModelState }) => state.article)
  let dispatch = useDispatch()

  useEffect(() => {
    dispatch({
      type: 'article/getArticleCategoryList',
      payload: id
    })
  }, [id])

  let li = [{ name: '所有', url: "article" }, { name: '前端', url: "front" }, { name: '后端', url: "be" }, { name: '阅读', url: "reading" }, { name: 'Linux', url: "linux" }, { name: 'LeetCode', url: "leetcode" }, { name: '要闻', url: "news" },]
  let inds = Number(localStorage.getItem('ind'))
  const [ind, setInd] = useState(inds)

  let tabs = (item: { name: string, url: string }, index: number) => {
    setInd(index)
    localStorage.setItem('ind', JSON.stringify(index))
    localStorage.setItem('tabsName', item.name)
  }

  return (
    <div className='app-category'>
      <div className='app-category-left'>
        <div className='app-category-top'>
          <div><h3 className='app-category-top-h3'>{localStorage.getItem('tabsName')}</h3><span>分类文章</span>
            <p>共搜索到 <span className='app-category-top-span'>{articleCategoryList[1]}</span> 片文章</p>
          </div>
        </div>
        <div className='app-category-tab'>
          <ul className='article-Tab-ul'>
            {
              li && li.map((item, index) => {
                return <Link key={index} to={index !== 0 ? `/category/${item.url}` : "/article"} onClick={tabs.bind(_, item, index)} id={'article-Tab-ul-li'} className={index == ind ? 'article-Tab-ul-hotpink' : "article-Tab-ul-000"}> {item.name}</Link>
              })
            }
          </ul>
        </div>
        <div className='app-category-main'>
          {
            articleCategoryList[0] && articleCategoryList[0].map((item: IArticleItem, index: number) => {
              return <ul key={index} className='article-main-ul'>
                <Link to={`/article/${item.id}`} className='article-Tab-main-li ' >
                  <div className='article-Tab-main-li-div'>
                    <h3 className='article-Tab-main-li-div-h3'>{item.title}</h3> <span>6个月前</span>
                  </div>
                  <dl className='article-Tab-main-li-dl' >
                    <dt className='article-Tab-main-li-dt'>
                      <img src={item.cover} alt="" />
                    </dt>
                    <dd className='article-Tab-main-li-dd'>
                      <div>
                        <p>{item.summary}</p>
                        <div className='article-Tab-main-li-dd-div'>
                          <span className='article-Tab-main-li-dd-div-span'> ❤{item.likes}</span> <span> 👁 {item.views}</span> <span> 🔗 分享</span>
                        </div>
                      </div>
                    </dd>
                  </dl>
                </Link>
              </ul>
            })
          }
        </div>
      </div>

      <div className='app-category-right'>
        <div>
          <RecommendedReading></RecommendedReading>
        </div>
        <div>
          <ArticleTag></ArticleTag>
        </div>
      </div>

    </div>
  )
}

export default category






